<template>
  <div>
    <div class="box2">
      <el-scrollbar ref="scrollbar">
        <div class="scrollbar-flex-content">
          <el-dropdown
            trigger="contextmenu"
            v-for="(item, index) in taglist"
            :key="item.name"
            @command="dees"
            @visible-change="benr(index, $event)"
            ref="keep"
          >
            <el-tag
              :class="$route.path == item.path ? 'active' : ''"
              :closable="index !== 0"
              effect="plain"
              :disable-transitions="false"
              @click="arrs(item.path)"
              @close="handleClose(index)"
              type="info"
            >
              <i v-if="$route.meta.title == item.name"
                ><el-icon><location /></el-icon
              ></i>
              {{ item.name }}
            </el-tag>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  :icon="RefreshRight"
                  :command="{ pps: 0, path: item.path, index }"
                  >刷新</el-dropdown-item
                >
                <el-dropdown-item
                  :icon="Close"
                  :command="{ pps: 1, path: item.path, index }"
                  >右侧关闭</el-dropdown-item
                >
                <el-dropdown-item
                  :icon="CircleClose"
                  :command="{ pps: 2, path: item.path, index }"
                  >全部关闭</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
  import { ArrowRight,Location,RefreshRight,Close,CircleClose,} from "@element-plus/icons-vue";
  import mest from "@/router/page";
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
  export default {
      components: {
      Location,
      RefreshRight,
      Close,
      CircleClose
    },
    data() {
      return {
        // taglist: [{ name: "首页", path: "/Home/Mainpage" }],
      };
    },
    computed:{
        ...mapGetters(['taglist'])
    },
    methods: {
      ...mapActions(['addlist','handleClose','arrs','CloseArr','kalos']),
      isColl() {
        this.isCollapse = !this.isCollapse;
        this.$refs.late.style.transform = !this.isCollapse? "rotateY(180deg)" : "rotateY(0deg)";
        },
      benr(index, event){
        if (!event) {
          return;
        }
        // 关闭和打开会触发
        this.$refs.keep.find((item, i) => {
          if (index == i) {
            item.handleOpen();
          } else {
             item.handleClose();
          }
        });
      },
      dees(data) {
        //  解构赋值
        let {pps,path,index} = data;
        switch (pps) {
          // 刷新
          case 0:
            this.$router.push({ path: "/redirect/" + path });
            break;
          case 1:
            this.kalos(index)
            break;
          case 2:
            //返回元素组的第一个下标，其他全部删除 //跳转到首页
            this.CloseArr()
            break;
          default:
            break;
        }
      },
    },
      created() {
      // console.log(this.$route)
      // 判断如果当前浏览器的路由不为首页的路由时 获取数据并添加到定义的tags中
      // if (this.$route.path !== "/Home/Mainpage") {
      //   this.taglist.push({
      //     name: this.$route.meta.title,
      //     path: this.$route.path,
      //   });
      // }
    },
    watch: {
      $route(val) {
        this.addlist(val)
        this.$nextTick(() => {
         this.$refs.scrollbar.updata
        });
      },
            
    },
    setup() {
      return{
        mest,
        Location,
        ArrowRight,
        RefreshRight,
        Close,
        CircleClose,
      }
    }
  }
</script>
<style lang="less" scoped>
  .box2 {
    height: 30px;
    width: 100%;
    border-top: 1px solid #545c64;
    border-bottom: 1px solid #545c64;
    line-height: 27px;
    .active {
      color: #fff;
      background-color: #409eff;
    }
    .scrollbar-flex-content {
      display: flex;
    }
    .el-tag {
      border-radius: 0px;
      margin-top: 3px;
      margin-left: 10px;
    }
  }
</style>
